<template>
    <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="演出团体" prop="name" />
        <el-table-column label="评分" prop="star" >
            <template #default="scope">
     <!-- <el-rate v-model="scope.row.evaValue" :allow-half="true"  disabled show-score text-color="#ff9900" score-template="{value}"></el-rate> -->
	<el-rate v-model="scope.row.star" :allow-half="true"  disabled text-color="#ff9900" show-score></el-rate>
    </template>
        </el-table-column>  
        <el-table-column label="演出地址" prop="address" />
        <el-table-column label="景点" prop="scenic" />
        <el-table-column label="详情">
            <template #default="scope">
                <el-button size="small" type="success" @click="QueryInfo(scope.$index,scope.row)">查看</el-button>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="查询" />
            </template>
        </el-table-column>
    </el-table>
    <el-drawer v-model="drawer" title="演出详情" :with-header="false">
    <span style="font-size: x-large; font-weight: bold; text-align: center; display:block;">演出详情</span>
    <div style="margin: 10px 0px 50px;">
        <img :src="img_path" style="height: 60%;width: 100%; "  />
    </div>
    <span>{{ info }}</span>
    </el-drawer>
</template>
  
<script>
import { getRequest } from '../../../api/axiosAPI'

export default {
    setup() {

    },
    mounted() {
        getRequest('http://localhost:8022/recreation?type=1')
        .then((response) => {
            if(response.status === 200){
                console.log('获取演出信息')
                console.log(response.data.data)
                let tempData = response.data.data
                for(let i = 0; i < tempData.length; i++){
                    this.tableData[i] = {
                        name: tempData[i].name,
                        info: tempData[i].info,
                        img_path: tempData[i].imgPath,
                        scenic: tempData[i].sname,
                        phone: tempData[i].phone,
                        address: tempData[i].address,
                        star: tempData[i].star
                    }
                }
            }
            else{
                console.log('Network Error!')
            }
        })
        .catch((error) =>{
            console.log(error)
        })
    },
    data() {
        return {
            img_path: '',
            info: '',
            drawer: false,
            search: '',
            tableData: [{
                name: 'aaa',
                address: '222',
                scenic: '铁道学院',
                star: 3.6,
                img_path: 'http://localhost:81/src/assets/image/scenicPage/tiedao.jpg',
                info:'1j313',
            }
            ],
        }
    },
    computed: {
        filterTableData(){
            return this.tableData.filter(
            (data) =>  
        !this.search ||
        data.address.toLowerCase().includes(this.search.toLowerCase()) ||
        data.scenic.toLowerCase().includes(this.search.toLowerCase()) ||
        data.name.toLowerCase().includes(this.search.toLowerCase())
    )
        } 
    },
    methods: {
        QueryInfo(index,row) {
            console.log(index,row)
            this.drawer = true
            this.img_path = row.img_path
            this.info = row.info
        },
    }
}



</script>
  